<template>
  <div class="register-container">
    <h2>客户注册</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label>账号：</label>
        <input type="text" v-model="form.username" required>
      </div>
      <div class="form-group">
        <label>姓名：</label>
        <input type="text" v-model="form.realName" required>
      </div>
      <div class="form-group">
        <label>公司名称：</label>
        <input type="text" v-model="form.companyName" required>
      </div>
      <div class="form-group">
        <label>联系电话：</label>
        <input type="tel" v-model="form.phone" pattern="[0-9]{11}" required>
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input type="password" v-model="form.password" required minlength="6">
      </div>
      <div class="form-actions">
        <button @click="handleCancel" type="button">取消</button>
        <button type="submit">提交注册</button>
    </div>
    </form>
    <p>注册需经管理员审核，审核通过后可登录</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from '../axios';
import { useRouter } from 'vue-router';

const router = useRouter();

const form = ref({
  username: '',
  realName: '',
  companyName: '',
  phone: '',
  password: ''
});

const handleRegister = async () => {
  try {
    await axios.post('/users/register', {
      ...form.value,
      userType: 'customer' // 固定为客户注册
    });
    alert('注册申请已提交，等待管理员审核');
    form.value = { username: '', realName: '', companyName: '', phone: '', password: '' };
  } catch (error) {
    alert(error.response.data.error || '注册失败，请重试');
  }
};

const handleCancel = () => {
  router.push('/login');
};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.form-actions button {
  flex: 1;
  margin-right: 10px;
}

.form-actions button:last-child {
  margin-right: 0;
}
</style>